<template>
    <page-box>
        <template v-slot:header>
            <ask-breadcrumb>
                <template v-for="(item, index) in $getBreadCrumbsName($route.path)">
                    <ask-breadcrumb-item :key="index" v-if="item.path" :to="'/' + item.path">{{ item.meta.title }}</ask-breadcrumb-item>
                    <ask-breadcrumb-item :key="index" v-else>{{ item.meta.title }}</ask-breadcrumb-item>
                </template>
            </ask-breadcrumb>
            <page-search>
                <page-search-column class="tab-column">
                    <el-tabs class="theme-gray" v-model="typeValue" @tab-click="handleTabClick">
                        <el-tab-pane
                            v-for="item in typeList"
                            :label="item.label"
                            :key="item.value"
                            :name="item.value"
                        >
                            <div slot="label" class="el-tab__label">{{item.label}}</div>
                        </el-tab-pane>
                    </el-tabs>
                </page-search-column>
                <page-search-column class="fixed-column">
                    <page-search-item>
                        <el-input
                            v-model="searchKey"
                            class="pbb__search-input"
                            prefix-icon="el-icon-search"
                            placeholder="请输入关键词搜索模板"
                            clearable
                        ></el-input>
                    </page-search-item>
                    <page-search-item>
                        <el-button
                            type="primary"
                            class="pbb__search-btn"
                            @click="handleSearch()"
                        >
                            查询
                        </el-button>
                    </page-search-item>
                </page-search-column>
                <!-- <page-search-column v-if="tagList.length > 0">
                    <tag-list
                        title="标签"
                        v-model="tagValue"
                        :list="tagList"
                        @change="handleTagChange('tag')"
                    >
                    </tag-list>
                </page-search-column> -->
                <!-- <page-search-column v-if="departmentList.length > 0">
                    <tag-list
                        title="部门"
                        v-model="departmentValue"
                        :list="departmentList"
                        @change="handleTagChange('department')"
                    >
                    </tag-list>
                </page-search-column> -->
            </page-search>
        </template>
        <product-list :list="tableData" @item-click="handleItemClick">
        </product-list>
        <template v-slot:footer v-if="pageCount > 0">
            <el-pagination
                class="pbb__pagination"
                @size-change="onPageSizeChange"
                @current-change="onCurrentPageChange"
                :current-page="currentPage"
                :page-sizes="[10, 20, 50, 100]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="pageCount"
            >
            </el-pagination>
        </template>
    </page-box>
</template>

<script lang="ts">
import { Component, Mixins } from "vue-property-decorator";
import FormMixin from "@/mixins/form.mixin.base.ts";
import TagList from "../components/tag-list/index.vue";
import ProductList from "../components/product/index.vue";

// const mock = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

@Component({
    name: "ModuleManageHome",
    components: {
        TagList,
        ProductList
    }
})
export default class ModuleManageHome extends Mixins(FormMixin) {
    cityCode = "";
    // 表格数据
    // tableData = [];
    currentPage = 1;
    pageSize = 10;
    pageCount = 0;
    searchKey = "";
    typeValue = "all";
    typeList = [
        {
            label: "通用表单",
            value: "all",
            status: "1"
        },
        {
            label: "乡镇表单",
            value: "my",
            status: "2"
        }
    ];

    tagValue = "";
    tagList = [];
    // tagList = mock.map((cur: any, index: number) => {
    //     return { label: "标签标签" + index, value: index };
    // });

    departmentValue = "";
    departmentList = [];
    // departmentList = mock.map((cur: any, index: number) => {
    //     return { label: "部门" + index, value: index };
    // });

    tableData = [];
    // tableData = mock.map((cur: any, index: number) => {
    //     return {
    //         src:
    //             "https://tianzuoyun-test.oss-cn-shenzhen.aliyuncs.com/file/image/packingres/personal/2020-12-17/61b22078-8396-4cff-8416-5f23d0fb462c.png",
    //         title: "我是模板名字" + index,
    //         id: index
    //     };
    // });

    activated() {
        this.initSearchData();
        this.initData(this.currentPage);
    }

    handleTagChange() {
        this.initData();
    }

    handleTabClick() {
        this.initSearchData();
        this.initData();
        // this.batchList = [];
        // this.canReleaseByBatch = false;
        // this.canOfflineByBatch = false;
    }

    onPageSizeChange(pageSize: number) {
        this.pageSize = pageSize;
        this.initData();
    }

    onCurrentPageChange(page: number) {
        this.initData(page);
    }

    async initSearchData() {
        // const tagResponse = await this.$server["moduleManage/tag"]();
        // if (tagResponse.data.code !== 200) {
        //     throw tagResponse.data;
        // }
        // this.tagList = (tagResponse.data.data || []).map((item: any) => {
        //     return {
        //         value: item.id,
        //         label: item.name || ""
        //     };
        // });
        const departmentResponse = await this.$server["moduleManage/department"]();
        if (this.responseHasError(departmentResponse)) {
            return;
        }
        this.departmentList = (departmentResponse.data.data || []).map((item: any) => {
            return {
                value: item.id || "",
                label: item.name || ""
            };
        });
    }

    async initData(page = 1) {
        const response = await this.$server["moduleManage/list"]({
            data: {
                templateKind: this.$key2Name({
                    type: this.typeValue,
                    list: this.typeList,
                    name: "status"
                }),
                status: 1,
                name: this.searchKey || undefined,
                departmentId: this.departmentValue || undefined,
                currentPage: page,
                pageSize: this.pageSize
            }
        });
        if (this.responseHasError(response)) {
            return;
        }
        const data = response.data.data || {};
        this.tableData = this.buildTableData(data.records || []);
        this.pageCount = Number(data.total || 0);
        this.currentPage = Number(page);
    }

    buildTableData(list: any) {
        let res: any = [];
        if (list.length === 0) {
            return res;
        }
        res = list.map((cur: any) => {
            const _imglist = this.formatUploadData(cur.coverImg);
            return {
                id: cur.formId || "",
                name: cur.templateName || "",
                desc: cur.description || "",
                department: cur.departmentName || "",
                cover: _imglist.length > 0 ? _imglist[0].url : "-",
                coverList: _imglist.map((cur: any) => cur.url),
                source: cur
            };
        });
        return res;
    }

    handleSearch() {
        this.initData();
    }

    handleItemClick(item: any, type: string) {
        const urlQuery: any = {
            type
        };
        if (type === "edit") {
            urlQuery.id = item.id;
            urlQuery.type = "query";
        }
        this.$router.push({
            name: "TownModuleManageForm",
            query: urlQuery
        });
    }
}
</script>
